<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
		<script type="text/javascript" src="../js/aikxian-common.js" ></script>
		<script type="text/javascript" src="../js/Base64.min.js" ></script>
		<script type="text/javascript" src="../js/echarts.js" ></script>
		<script type="text/javascript" src="../js/rem.js" ></script>
		<script type="text/javascript" src="../js/common.js?id=0002" ></script>
		
		<script></script>
		<style>
			/*===========样式常规设置=========================================*/
			body,ul,li,dl,dt,dd,p,ol,h1,h2,h3,h4,h5,h6,form,img,table,fieldset,legend{margin:0; padding:0;}
			ul,li,ol{list-style:none;}
			img,fieldset{border:0; }
			/*img{display:block;}*/
			a{text-decoration:none;}
			h1,h2,h3,h4,h5,h6{font-weight:100;}
			body{font-family: "Microsoft Yahei","微软雅黑","Tahoma","Helvetica","STHeiti";}
			input,a,select{outline:none;}
			i{font-style:normal;}
			body{
				font-size: 0.3rem;	
				background:#f8f8f8;
				padding-bottom: 2rem;
			}
			/*字体*/
			.bigSize{
				font-size: 20px;
			}
			.normalSize{
				font-size: 0.32rem;
			}
			.littleSize{
				font-size: 0.28rem;
				
			}
			.samllSize{
				font-size: 0.24rem;
			}
			img,div,input,ul,li{
				-webkit-tap-highlight-color: transparent;
				-webkit-appearance: none;
			}
			/*===========样式常规设置end=======================================*/
			
			header{
				width:100%;
				height:2rem;
				background: cornflowerblue;
				z-index: 99;
				position: fixed;
				top:0;
				left:0;
				background:url(../img/bgHead.png) no-repeat left top;
				background-size: cover;
			}
			.updateTime{
				line-height: 0.5rem;
				color:#666;
				float: right;
				margin-right: 0.5rem;
				font-size: 0.24rem;
			}
			.title{
				width:74%;
				padding-left:0.1rem;
				box-sizing: border-box;
				height:1rem;
				overflow: hidden;
				float:right;
				margin-top:0.15rem;
				margin-right: 0.3rem;
				background: url(../img/kuang.png) no-repeat left top;
				background-size:cover;
				color:#000;
				font-size:0.32rem;
				/*padding-right: 0.5rem;*/
				/*box-sizing: border-box;*/
			}
			.container{
				margin-top:2.1rem;
				border-top:1px solid #ccc;
				width:100%;
				/*height:3rem;*/
				
			}
			.title2{
				width:100%;
				padding-top: 0.3rem;
				text-align: center;
				background:#fff;	
			}
			.k_line{
				width:100%;
				height:256px;
				overflow: hidden;
				background: #fff;
				position: relative;
				box-sizing: border-box;
				background:#fff;	
			}
			#main{
				width:100%;
				height:100%;
				position: absolute;
				left:0.3rem;
				top:0;
			}
		/*@media screen and (max-width>=750px) {
		    #main{
		    	height:400px;
		    }
		}*/
		.tab{
			width:100%;
			background:#fff;
			padding:0.3rem 0;	
		}
		.tab_chart{
			width:70%;
			height:0.6rem;
			border:1px solid #ccc;
			-moz-border-radius: 4px; /* Firefox */
  			-webkit-border-radius: 4px; /* Safari 和 Chrome */
 			border-radius: 4px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
 			overflow:hidden;
			margin:0 auto;
			
		}
		.tab_chart li{
			width:33.3%;
			height:100%;
			color:#333;
			line-height: 0.6rem;
			text-align: center;
			float:left;
			box-sizing: border-box;
		}
		.choose_li{
			background:#e0e0e0;
		}
		.tab_chart li.center{
			border-left:1px solid #ababab;
			border-right:1px solid #ababab;
		}
		@media only screen
			and (min-device-width : 768px)
			and (max-device-width : 1024px){
				#main{
					
				}
				.k_line{
			    	height:350px;
			    }
			}
			
			
			.dataMes{
				margin-top:0.2rem;
				width:100%;
				background:#fff;
			}
			.dataUl{
				/*padding:0 0.3rem;*/
			}
			.dataUl li,.dataUl_po li{
				width:100%;
				height:0.88rem;
				overflow:hidden;
				line-height: 0.88rem;
				padding:0 0.3rem;
				box-sizing: border-box;
				border-bottom: 1px solid #ccc;
				color:#595959;
			}
			.leftSp{
				float:left;
			}
			.rightSp{
				float:right;
			}
			#ruler {  
			    visibility: hidden;  
			    white-space: nowrap;  
			    /*font-size: 24px;*/ 
			    position: absolute;
			    top:0;
			    left:0;  
			} 
			.loading{
			width:100%;
			height:100%;
			position: fixed;
			z-index: 1024;
			background:#fff;
			top:0;
			left:0;
		}
		.loadImg{
			width:30px;
			height:30px;
			position: absolute;
			top:50%;
			left:50%;
			margin-top:-15px;
			margin-left:-15px;
			
			
		}
		</style>
	</head>
	<body>
		<div class="loading">
      	  <img src="../img/jiazai.gif" class="loadImg"/> 
        </div>
		<span id="ruler" class='littleSize'></span>
		<header>
			<span class='updateTime samllSize'>更新时间：<i>2017/03/04</i></span>
			<a href="#" id="titleLink"><div class="title littleSize" id='title'></div></a>
		</header>
		<div class="container" >
			<div class='zhexain' style='width:100%;'>
			<div class="title2"></div>
			<div class="tab">
				<ul class='tab_chart'>
					<li class='choose_li'queryTime='1'>近1个月</li>
					<li class="center"queryTime='2'>近6个月</li>
					<li queryTime='3'>近一年</li>
				</ul>
			</div>
			<div class='k_line'>
				 <div id="main"></div>
			</div>
			</div>
			<div class='dataMes'>
				<ul class='dataUl'>
					<!--<li>
						<span class='leftSp'>已购份额(份)</span>
						<span class='rightSp'>1000</span>
					</li>
					<li>
						<span class='leftSp'>已购份额(份)</span>
						<span class='rightSp'>1000<img src='../img/arrow.png' style='width:0.24rem;margin-left:0.1rem;vertical-align: -0.1rem;'/></span>
					</li>
					<li>
						<span class='leftSp'>已购份额(份)</span>
						<span class='rightSp'>1000</span>
					</li>
					<li>
						<span class='leftSp'>已购份额(份)</span>
						<span class='rightSp'>1000</span>
					</li>-->
				</ul>
				<div style='width:100%;height:0.2rem; background:#efefef;'></div>
				<ul class='dataUl_po'>
					<li >
						<span class='leftSp'>产品信息</span>
						<span class='rightSp' style='color:#333;'>查看更多<img src='../img/arrow.png' style='width:0.24rem;margin-left:0.1rem;vertical-align: -0.1rem;'/></span>
					</li>
				</ul>
			</div>
			<div style='height:2rem;'></div>
		</div>
		
		<script>
		window.onload=function(){
			$(".loading").fadeOut();
			var proCode=$.getUrlParam("proCode");
			var orderId=$.getUrlParam("orderId");
			var prodType=$.getUrlParam("prodType");
			var prodName ='';
			//var prodName=$.getUrlParam("prodName");
			var id=$.getUrlParam("id");
			var updateTime='';
			//产品类型为固收（现改为债权）else if(proType=="2"//产品类型为现金else if(proType=="3"//产品类型为权益
			
			
				
			var id=$.getUrlParam("id");
		//基于准备好的dom，初始化echarts实例；
			var myChart=echarts.init(document.getElementById("main"));
		var data='';
		var data1=[
		        {"value":["1997/10/4",723]},
				{"value":["1997/10/5",723]},
				{"value":["1997/10/6",731]},
				{"value":["1997/10/7",726]},
//				{"value":["1997/10/12",751]},{"name":"Mon Oct 13 1997 00:00:00 GMT+0800 (中国标准时间)",
//			
//				"value":["1998/2/5",786]},{"name":"Fri Feb 06 1998 00:00:00 GMT+0800 (中国标准时间)",}
				]
				//指定图表的配置项和数据
				option = {
				    tooltip:{
				        trigger: 'axis',
				        show:false,
				        formatter: function (params){
				            params = params[0];
				            var date = new Date(params.name);
				            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
				        },
				        axisPointer: {
				            animation: false
				        }
				    },
				    grid: {
				        left: '12%',
				        top: '15%',
				        bottom: '15%',
				        containLabel: false
		   			 },
		   			legend: {
		   		        right: '20',
		   		        data: ['数据']
		   		    },
				    xAxis: {
				        type: 'time',
				        splitLine: {
				            show: true
				        },
				        nameTextStyle:{
				        	color:'red'
				        }
				    },
				    
				    yAxis: {
				    	name:'单位（%）',
				        type: 'value',
				        boundaryGap: ['0', '100%'],
				        splitLine: {
				            show: true
				        }
				    }, 
				    series: [{
				        name: '数据',
				        type: 'line',
				        showSymbol: false,
				        hoverAnimation: false
//				        data:data
				    }]
				};
				//alert(option.series[0].data);
				//使用刚指定的配置项和数据显示图表。
				
				if(prodType=='2'){
					$(".title2").html('唐诚现金管理七日化收益率如下');
					//option.legend.data=['七日化收益率']
					option.series[0].name='七日化收益率';
					option.legend.data=['七日化收益率'];
					
					dataAjax();
				}else if(prodType=='3'){
					
					$(".title2").html('最新净值走势');
					option.series[0].name='净值走势';
					option.legend.data=['净值走势'];
					//option.legend.data=['净值走势']
					dataAjax();
				}else{
					$('.zhexain').hide();
				}
				myChart.setOption(option);
			$(".tab_chart li").each(function(){
				var $this=$(this);
				$this.click(function(){
					$(".tab_chart li").removeClass('choose_li');
					$this.addClass('choose_li');
					dataAjax();
				})
			})
		
		
		
		dataAjax();
		function dataAjax(){
			var queryTime=$(".choose_li").attr('queryTime');
//			var str='{"language":"zh_CN","proCode":"GD201612001","queryTime":"'+queryTime+'","queryFlag":"2"}';
			var str='{"language":"zh_CN","proCode":"'+proCode+'","queryTime":"'+queryTime+'","queryFlag":"2"}';
			str = Base64.encode(str);
			jQuery(function(){
					jQuery.ajax({
						url:yunying_require,
						type:"post",
						dataType:"text",
						data:{commonURL:yunying_require,'param':str,'opName':'private_profit_list',"osFlag":'5'},
						async:false,
						success:function(serverinfo){
							
							if(serverinfo!=''){
							console.log(serverinfo);
							var Data=Base64.decode(serverinfo);
							Data=JSON.parse(Data);
							console.log(Data);
//							option.series[0].data=data1;
							option.series[0].data=Data.result;
							
							//console.log(data1);
							//console.log('===================================');
							console.log(Data.result);
							for(var i=0;i<Data.result.length;i++){
								//console.log(Data.re                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          sult[i].value);
								Data.result[i].value[1]=parseFloat(Data.result[i].value[1])*100;
								//console.log('===================================');
								//console.log(Data.result[i].value);
							}
							option.series[0].data=Data.result;
							myChart.setOption(option);
							}
						},
						error:function(){
							alert('error:function');
						}
					})
			})
		}
		
		

		//详情信息；
		xiangQingAjax();
		function xiangQingAjax(){
			//var str='{"language":"zh_CN","orderId":"7279","prodType":"1","prodName":"XXXXXX","id":"PI000000000623"}';
			var str='{"language":"zh_CN","orderId":"'+orderId+'","prodType":"'+prodType+'","prodId":"'+id+'"}';
			str = Base64.encode(str);
			jQuery(function(){
					jQuery.ajax({
						url:yunying_require,
						type:"post",
						dataType:"text",
						data:{commonURL:yunying_require,'param':str,'opName':'private_trade_detail',"osFlag":'5'},
						async:false,
						success:function(serverinfo){
							
//							console.log(serverinfo);
							var Data=Base64.decode(serverinfo);
							Data=JSON.parse(Data);	
							console.log(Data);
							if(Data.updateTime){
								$(".updateTime").html("更新时间"+Data.updateTime);
								updateTime=Data.updateTime;
							}
							prodName=Data.prodName;
							$("#title").html(prodName);//dataUl
							//计算标题长度
							var Text = prodName;
							
								String.prototype.visualLength = function()  
										{  
									        var ruler = $("#ruler"); 
						//					alert(this);
											ruler.text(Text);
									        return ruler[0].offsetWidth;  
										} 				
									
									var len = Text.visualLength();
					//				alert('len='+len);
									var kuangWidth=$("#title").width();
									var kuangHeight=$("#title").height();
					//				alert('kuangWidth='+kuangWidth);
									//alert('kuangHeight='+kuangHeight);
									if(len<kuangWidth){
										$("#title").css('line-height',kuangHeight+'px');
									}else{
										var lineHeight=$("#ruler")[0].offsetHeight+2;
					//					alert(lineHeight)
										$("#title").css('line-height',lineHeight+'px');
									}
							var productShow=Data.productShow;
							for(var i=0;i<productShow.length;i++){
								var $li="<li><span class='leftSp'>"+productShow[i].title+"</span><span class='rightSp' style='color:#000;'>"+productShow[i].value+"</span></li>"
								$(".dataUl").append($li);
							}
							if(Data.perMillionEarnings){
								var $li="<li queryFlag='1' class='shouyi'><span class='leftSp'>每万份收益</span><span class='rightSp'>"+Data.perMillionEarnings+"<img src='../img/arrow.png' style='width:0.24rem;margin-left:0.1rem;vertical-align: -0.1rem;'/></span></li>"
								$(".dataUl").append($li);
							}
							if(Data.sevenYearRate){
								var $li="<li queryFlag='0' class='shouyi'><span class='leftSp'>近7日年化收益</span><span class='rightSp'>"+Data.sevenYearRate+"<img src='../img/arrow.png' style='width:0.24rem;margin-left:0.1rem;vertical-align: -0.1rem;'/></span></li>"
								$(".dataUl").append($li);
							}
							
							
							var $div=$('<div style="width:100%;height:0.2rem;background:#efefef;"></div>');
							$(".dataUl").append($div);
							if(Data.timeShow&&Data.timeShow!='')
							{	var timeShow=Data.timeShow;
								for(var i=0;i<timeShow.length;i++){
									var $li="<li><span class='leftSp'>"+timeShow[i].title+"</span><span class='rightSp'style='color:#000;'>"+timeShow[i].value+"</span></li>"
									$(".dataUl").append($li);
								}
							}
						},
						error:function(){
							
						}
					})
			})
		}
		$(".dataUl").on('click','li.shouyi',function(){
			var queryFlag=$(this).attr('queryFlag');
			window.location='shouyi.html?queryFlag='+queryFlag+'&proCode='+proCode+'&queryTime=4&prodName='+prodName+'';
		})
		$(".dataUl_po").click(function(){
			window.location="Product_information.html?prodName="+prodName+"&id="+id+"&orderId="+orderId+"&prodType="+prodType+"&orderId="+orderId+"";
		})
		//最外层；
		}
		</script>
		
	</body>
</html>
